import { View } from '@tarojs/components';
import useChooseAddress from './useChooseAddress';
import styles from './index.module.scss';
import { IChooseAddress, IAddress } from './type';

export { IAddress };

const ChooseAddress = (props: IChooseAddress) => {
  const {level, fieldNames, options} = props;
  const {selectData, listClick, showListClick} = useChooseAddress({options, level, fieldNames});
  return (
    <View className={styles.content}>
      <View className={styles.box}>
        {selectData.map((item, index) => (
          <View key={index} className={`${styles.title} ${item.status ? styles.active : ''}`}
                onTap={() => showListClick(index)}>{item.name}</View>
        ))}
      </View>

      {selectData.map((items, index) => (
        <View key={index}>
          {items.status && <View>
            {items.data.map((item: IAddress) => (
              <View className={styles.list} onTap={() => listClick(index, item)}>{item.name}</View>
            ))}
          </View>}
        </View>
      ))}
    </View>
  );
};

export default ChooseAddress;